<!-- 修改密码的组件 -->

<template>
  <div>
    <Dialog
      :show="dialogConfig.show"
      :title="dialogConfig.title"
      :buttons="dialogConfig.buttons"
      width="500px"
      :showCancel="false"
      @close="clear"
      :showClose="false"
      :closeOnClickModal="false"
    >
      <el-form
        :model="formData"
        :rules="rules"
        ref="formDataRef"
        label-width="80px"
        @submit.prevent
      >
        <!--input输入-->
        <el-form-item label="新密码" prop="password">
          <el-input
            clearable
            placeholder="请输入密码"
            v-model.trim="formData.password"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="RePassword">
          <el-input
            clearable
            placeholder="请再次输入密码"
            v-model.trim="formData.RePassword"
          ></el-input>
        </el-form-item>
      </el-form>
    </Dialog>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick } from "vue";
import { ElMessage } from "element-plus";
import Dialog from "@/components/Dialog.vue";
const { proxy } = getCurrentInstance();
import { updateUserPassword } from "@/api/userinfo";
import SparkMD5 from "spark-md5";
import { useUserInfoStore } from "@/store/userInfoStore";
const userInfoToken = useUserInfoStore();
const formData = ref({});
const formDataRef = ref();
const rules = {
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    {
      validator: proxy.Verify.password,
      message: "8-18位,可输入数字、字母、特殊字符。",
      trigger: "blur",
    },
  ],
  RePassword: [
    { required: true, message: "请再次输入密码", trigger: "blur" },
    {
      validator: (rule, value, callback) => value === formData.value.password,
      trigger: "blur",
      message: "两次密码不一致",
    },
  ],
};

const props = defineProps({
  // 显示弹窗
  show: {
    type: Boolean,
    default: false,
  },
  // 弹窗标题
  title: {
    type: String,
    default: "标题",
  },
  // 弹窗内容
  content: {
    type: String,
    default: "内容",
  },
});

const dialogConfig = reactive({
  show: false,
  title: props.title,
  buttons: [
    {
      type: "primary",
      text: "确定",
      click: (e) => {
        submitForm();
      },
    },
  ],
});
// 弹窗展示的方法
const showUpdateDialog = () => {
  dialogConfig.show = true;
};

// // 清除组件的数据
const clear = () => {
  // 延迟 0.3 秒执行某个操作
  setTimeout(() => {
    // formData.value = {};
    // 清除表单数据
    formDataRef.value.resetFields();
    // 清除表单验证
    formDataRef.value.clearValidate();
    console.log("clear", formData.value);
  }, 300);
};

const submitForm = () => {
  // 提交数据
  formDataRef.value.validate((valid) => {
    if (valid) {
      // 获取用户id
      formData.value.userId = userInfoToken.userId;
      // 将密码转成MD5加密格式
      formData.value.password = SparkMD5.hash(formData.value.password);
      formData.value.RePassword = SparkMD5.hash(formData.value.RePassword);
      updateUserPassword(formData.value).then((res) => {
        if ((res.code = 200)) {
          ElMessage.success("修改成功");
        }
      });
    } else {
      ElMessage.error("请输入正确的数据");
    }
  });

  dialogConfig.show = false;
};

defineExpose({ showUpdateDialog });
</script>

<style lang="scss" scoped></style>
